<html>
<head profile="http://www.w3.org/2002/12/namespace">
<link rel="stylesheet" type="text/css" href="../../../../../dijit/themes/dijit.css">
<link rel="stylesheet" type="text/css" href="../../../../../dijit/themes/tundra/tundra.css">
<title>Dojo Widget Feature</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<!-- hosted version -->
<script type="text/javascript" src="http://openlayers.org/api/2/OpenLayers.js"></script>

<script type="text/javascript">
	var dojoConfig = {
		parseOnLoad : true,
		async:true
	};
</script>

<script type="text/javascript" src="../../../../../dojo/dojo.js"></script>

<script type="text/javascript">
	require([
		"dojo/ready",
		"dojo/_base/array",
		"dojo/_base/window",
		"dojo/sniff",
		"dojo/dom-construct",
		"dojox/geo/openlayers/_base",
		"dojox/geo/openlayers/widget/Map",
		"dojox/geo/openlayers/Layer",
		"dojox/geo/openlayers/WidgetFeature",
		"dojox/charting/widget/Chart",
		"dojox/charting/themes/PlotKit/blue",
		"dijit/form/RadioButton",
		"dojo/parser",
		"dojox/charting/plot2d/Pie"
		], 
		function(ready, arr, win, sniff, domConstruct, openlayers, Map, Layer, WidgetFeature, Chart, blue, RadioButton){

		var map;

		ready(function(){
			var opts = {
				baseLayerType : openlayers.OSM
			};

			map = new Map({}, "map");
			map.startup();

			var loc = '{"position" : [2.940673, 47.179259], "extent" : "5"}';
			map.map.fitTo(loc);

			createCharts();
		});

		function toDeg(r){
			return r * 180 / Math.PI;
		}

		var locs = [{
			name : "Nice",
			x : 7.262,
			y : 43.706
		}, {
			name : "Aix-en-Provence",
			x : 5.448,
			y : 43.528
		}, {
			name : "Marseille",
			x : 5.399,
			y : 43.297
		}, {
			name : "Caen",
			x : -0.360,
			y : 49.184
		}, {
			name : "Dijon",
			x : 5.036,
			y : 47.322
		}, {
			name : "Besancon",
			x : 6.026,
			y : 47.245
		}, {
			name : "Brest",
			x : -4.490,
			y : 48.388
		}, {
			name : "Nimes",
			x : 4.361,
			y : 43.839
		}, {
			name : "Toulouse",
			x : 1.450,
			y : 43.600
		}, {
			name : "Bordeaux",
			x : -0.575,
			y : 44.843
		}, {
			name : "Montpellier",
			x : 3.874,
			y : 43.609
		}, {
			name : "Rennes",
			x : -1.680,
			y : 48.108
		}, {
			name : "Tours",
			x : 0.684,
			y : 47.393
		}, {
			name : "Grenoble",
			x : 5.723,
			y : 45.185
		}, {
			name : "Saint-Etienne",
			x : 4.390,
			y : 45.441
		}, {
			name : "Nantes",
			x : -1.554,
			y : 47.219
		}, {
			name : "Orleans",
			x : 1.907,
			y : 47.904
		}, {
			name : "Angers",
			x : -0.556,
			y : 47.471
		}, {
			name : "Reims",
			x : 4.031,
			y : 49.258
		}, {
			name : "Nancy",
			x : 6.174,
			y : 48.690
		}, {
			name : "Metz",
			x : 6.183,
			y : 49.109
		}, {
			name : "Lille",
			x : 3.045,
			y : 50.628
		}, {
			name : "Clermont-Ferrand",
			x : 3.085,
			y : 45.779
		}, {
			name : "Perpignan",
			x : 2.893,
			y : 42.698
		}, {
			name : "Strasbourg",
			x : 7.756,
			y : 48.584
		}, {
			name : "Mulhouse",
			x : 7.333,
			y : 47.748
		}, {
			name : "Lyon",
			x : 4.835,
			y : 45.760
		}, {
			name : "Villeurbanne",
			x : 4.882,
			y : 45.779
		}, {
			name : "Le Mans",
			x : 0.203,
			y : 47.996
		}, {
			name : "Paris",
			x : 2.346,
			y : 48.861
		}, {
			name : "Le Havre",
			x : 0.127,
			y : 49.501
		}, {
			name : "Rouen",
			x : 1.089,
			y : 49.438
		}, {
			name : "Amiens",
			x : 2.293,
			y : 49.894
		}, {
			name : "Toulon",
			x : 5.934,
			y : 43.127
		}, {
			name : "Limoges",
			x : 1.259,
			y : 45.832
		}, {
			name : "Boulogne-Billancourt",
			x : 2.242,
			y : 48.840
		}];

		var locsIE = [{
			name : "Nice",
			x : 7.262,
			y : 43.706
		}, {
			name : "Saint-Etienne",
			x : 4.390,
			y : 45.441
		}, {
			name : "Strasbourg",
			x : 7.756,
			y : 48.584
		}, {
			name : "Boulogne-Billancourt",
			x : 2.242,
			y : 48.840
		}];

		function createCharts(){
			var layer = new Layer();
			map.map.addLayer(layer);
			var lo;
			if(sniff.isIE)
				lo = locsIE;
			else
				lo = locs;
			arr.forEach(lo, function(l){
				var feature = createChart(l, {});
				layer.addFeature(feature);
			});
			setTimeout(function(){
				layer.redraw();
			}, 500);
		}

		function getCoords(loc){
			var lng = 0;
			if(loc.hasOwnProperty('x'))
				lng = loc.x;
			if(loc.hasOwnProperty('lng'))
				lng = openlayers.parseDMS(loc.lng, true);

			var lat = 0;
			if(loc.hasOwnProperty('y'))
				lat = loc.y;
			if(loc.hasOwnProperty('lat'))
				lat = openlayers.parseDMS(loc.lat, true);
			return [lng, lat];
		}

		function createButton(loc){
			var db = domConstruct.create("div", {}, win.body());
			var b = new RadioButton({
				checked : false
			}, db);
			var c = getCoords(loc);
			var f = {
				longitude : c[0],
				latitude : c[1],
				widget : b,
				width : 15,
				height : 15
			};
			return new WidgetFeature(f);
		}

		function createChart(loc, params){
			var feature = null, co = getCoords(loc), descr;

			if(params.dijitId){
				descr = {
					longitude : co[0],
					latitude : co[1],
					dijitId : params.dijitId,
					width : 50,
					height : 50
				};
				feature = new WidgetFeature(descr);
			}else{
				var chartSize = 50;
				descr = {
					// location of the widget
					longitude : co[0],
					latitude : co[1],
					// the function which creates the widget
					createWidget : function(){
						var div = domConstruct.create("div", {}, win.body());
						var chart = new Chart({
							margins : {
								l : 0,
								r : 0,
								t : 0,
								b : 0
							}
						}, div);
						var c = chart.chart;
						c.addPlot("default", {
							type : "Pie",
							radius : chartSize / 2,
							labelOffset : chartSize,
							fontColor : "black"
						});

						var ser = [2, 8, 12, 43, 56, 23, 43, 1, 33];
						c.addSeries("Series", ser);
						c.setTheme(blue);
						c.render();
						c.theme.plotarea.fill = undefined;
						return chart;
					},
					width : chartSize,
					height : chartSize
				};
				feature = new WidgetFeature(descr);
			}
			return feature;
		}
	});
</script>
</head>
<body class="tundra">
	<div id="map" style="background-color: #b5d0d0; width: 100%; height: 100%;"></div>
</body>
</html>
